<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <a href="#">
                <img src="https://gitee.com/haoxuan98/strange_front_page/raw/master/%E5%B8%A6%E6%82%AC%E5%81%9C%E5%8A%A8%E7%94%BB%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E5%8D%A1/profile.JPG" alt="">
            </a>
            <div class="title">Andrew Neil</div>
            <div class="place">Surkhet, Nepal</div>
        </div>
        <div class="content">
            <p>User Interface Designer and <br>front-end developer</p></p>
            <div class="buttons">
                <div class="btn">
                    <button>Message</button>
                </div>
                <div class="btn">
                    <button>Following</button>
                </div>
            </div>
        </div>
        <div class="icons">
            <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
            <li><a href="#"><span class="fab fa-twitter"></span></a></li>
            <li><a href="#"><span class="fab fa-instagram"></span></a></li>
        </div>
    </div>
    <script>
        const img = document.querySelector("img");
        img.onclick = function() {
            this.classList.toggle("active");
        }
    </script>
</body>
</html>